<div *ngFor="let item of actions; index as i" class="item">
    <flex-variable class="item-head" [data]="data" (onchange)="setVariable(i, $event)" [variableId]="item.variableId" [withStaticValue]="false"
    [withBitmask]="withBitmask" [bitmask]="item.bitmask">
    </flex-variable>
    <div class="action-content">
        <div *ngIf="slideView" class="item-range">
            <range-number [range]="item.range"></range-number>
        </div>
        <div class="my-form-field" style="width: 278px;">
            <span>{{'gauges.property-action-type' | translate}}</span>
            <mat-select [(value)]="item.type" (selectionChange)="onCheckActionType(item.type, item)">
                <mat-option *ngFor="let ev of actionsSupported | enumToArray" [value]="ev.key">
                    {{ ev.value }}
                </mat-option>
            </mat-select>
        </div>
        <div class="item-remove">
            <button mat-icon-button (click)="onRemoveAction(i)" class="_remove">
                <mat-icon>clear</mat-icon>
            </button>
        </div>
        <div [ngSwitch]="item.type">
            <div *ngSwitchCase="actionBlink" class="action-params">
                <div class="my-form-field">
                    <span>{{'gauges.property-input-color' | translate}}</span>
                    <input [(colorPicker)]="item.options.fillA" [value]="item.options.fillA" [style.background]="item.options.fillA" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" class="input-color"
                        style="width:70px;" [cpPosition]="'auto'" [cpAlphaChannel]="'always'" [cpOutputFormat]="'hex'"/>
                </div>
                <div class="my-form-field" style="margin-left: 10px;">
                    <span>{{'gauges.property-input-stroke' | translate}}</span>
                    <input [(colorPicker)]="item.options.strokeA" [value]="item.options.strokeA" [style.background]="item.options.strokeA" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" class="input-color"
                        style="width:70px;" [cpPosition]="'auto'" [cpAlphaChannel]="'always'" [cpOutputFormat]="'hex'"/>
                </div>
                <div class="my-form-field" style="padding-left: 35px;padding-right: 35px;">
                    <span>{{'gauges.property-interval-msec' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.options.interval" type="text" style="width: 80px">
                </div>
                <div class="my-form-field">
                    <span>{{'gauges.property-input-color' | translate}}</span>
                    <input [(colorPicker)]="item.options.fillB" [value]="item.options.fillB" [style.background]="item.options.fillB" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" class="input-color"
                        style="width:70px;" [cpPosition]="'auto'" [cpAlphaChannel]="'always'" [cpOutputFormat]="'hex'"/>
                </div>
                <div class="my-form-field" style="margin-left: 10px;">
                    <span>{{'gauges.property-input-stroke' | translate}}</span>
                    <input [(colorPicker)]="item.options.strokeB" [value]="item.options.strokeB" [style.background]="item.options.strokeB" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" class="input-color"
                        style="width:70px;" [cpPosition]="'auto'" [cpAlphaChannel]="'always'" [cpOutputFormat]="'hex'"/>
                </div>
            </div>
        </div>
        <div [ngSwitch]="item.type">
            <div *ngSwitchCase="actionRotate" class="action-params">
                <div class="my-form-field" style="padding-right: 10px;">
                    <span>{{'gauges.property-action-minAngle' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.options.minAngle" type="number" style="width: 70px">
                </div>
                <div class="my-form-field">
                    <span>{{'gauges.property-action-maxAngle' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.options.maxAngle" type="number" style="width: 70px">
                </div>
            </div>
            <div *ngSwitchCase="actionMove" class="action-params">
                <div class="my-form-field mr10">
                    <span>{{'gauges.property-action-toX' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.options.toX" type="number" style="width: 70px">
                </div>
                <div class="my-form-field mr10">
                    <span>{{'gauges.property-action-toY' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.options.toY" type="number" style="width: 70px">
                </div>
                <div class="my-form-field mr10">
                    <span>{{'gauges.property-action-duration' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.options.duration" type="number" style="width: 70px">
                </div>                
            </div>
        </div>
    </div>
</div>
